<template>
  <ul
    :class="{'tab-bar-140':height === 140}"
    class="tab-bar"
  >
    <li
      :class="{active:i === cur}"
      :key="i" @tap="navTo(v,i)"
      v-for="(v,i) in tabBarList"
    >
      <img :src="i === cur ? v.activeUrl : v.url" alt="">
      <span>{{ v.text }}</span>
    </li>
  </ul>
</template>

<script>
  export default {
    props: {
      cur: {
        type: Number,
        default: -1
      }
    },
    data() {
      return {
        height: 0,
        tabBarList: [
          {
            path: "/pages/index/index",
            url: require('./img/tab_ico_class_n_copy@2x.png'),
            activeUrl: require('./img/tab_ico_today_s@2x.png'),
            text: '今日课程'
          },
          {
            path: "/pages/my-course/my-course",
            url: require('./img/tab_ico_class_n@2x.png'),
            activeUrl: require('./img/tab_ico_class_s@2x.png'),
            text: '我的课程'
          },
          {
            path: "/pages/homework/homework",
            url: require('./img/tab_ico_work_h@2x.png'),
            activeUrl: require('./img/tab_ico_work_s@2x.png'),
            text: '作品中心'
          },
          {
            path: "/pages/user/user",
            url: require('./img/tab_ico_mine_n@2x.png'),
            activeUrl: require('./img/tab_ico_mine_s@2x.png'),
            text: '个人中心'
          },

        ]
      }

    },
    created() {
      uni.hideTabBar({});
      let that = this;
      wx.getSystemInfo({
        success: res => {
          // console.log('手机信息res'+res.model)
          let info = res.model;
          that.height = info.search('iPhone X') !== -1 ? 140 : 100;
          console.log(that.height);
        }
      })
    },
    methods: {
      navTo(v, i) {
        if (i !== this.cur) {
          const url = v.path;
          uni.switchTab({
            url
          })
        } else {
        }
      }
    }
  };
</script>

<style lang="scss" scoped>
  @import "../../uni";

  .tab-bar {
    z-index: 999;
    width: 100vw;
    height: upx(100);
    display: flex;
    justify-content: space-between;
    background: #fff;
    padding-bottom: upx(20);

    &.tab-bar-140 {
      padding-bottom: upx(40);
    }

    li {
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: relative;
      flex-direction: column;
      width: 25%;
      padding: upx(4) 0;
      font-size: upx(22);
      color: #9096A3;

      img {
        flex-shrink: 0;
        width: upx(60);
        height: upx(60);
      }

      &.active {
        color: $theme-green;
        font-weight: 500;

        img {
          flex-shrink: 0;
          margin-top: upx(-26);
          width: upx(80);
          height: upx(80);
        }
      }

    }

  }
</style>

